import { useUpdateEffect } from 'ahooks'
import { List, Image, Toast, Button, SwipeAction, Ellipsis, Space, Tag, InfiniteScroll } from 'antd-mobile'
import Link from 'next/link'
import router from 'next/router'
import React, { useEffect, useState } from 'react'
import timeConvert from '../../../libs/timeConvert'
import { judgeLoad } from '../../../libs/utils'
import { Relevance } from '../../../models/enums'
import { BookService } from '../../../services'
import Empty from '../../Empty'
import { Winicon } from '../../Icon'

import styles from './style.module.scss'

interface Props {
  books: BookService.Blist[]
  flag: boolean
  onChange: (type: Relevance) => void
  hasMore: boolean
  getBooks: (skip: number, type: Relevance) => void
}

const Goods = ({ books, flag, onChange, hasMore, getBooks }: Props) => {

  const [active, setActive] = useState(true)

  async function removeBook(id: string) {
    if (confirm('是否删除书籍')) {
      const res = await BookService.delbook(id)
      if (res.stat === 'OK') {
        Toast.show({ content: <Winicon text={res.msg} /> })
      }
    }
  }

  useUpdateEffect(() => {
    if (active) onChange(Relevance.Myissue)
    else onChange(Relevance.Maichu)
  }, [active])

  return (
    <List  header={
      <div className={styles.header}>
        <span>商品</span>
        <ul>
          <li
            className={active ? styles.bule : ' '}
            onClick={() => setActive(true)}>发布</li>
          <li
            className={active ? ' ' : styles.bule}
            onClick={() => setActive(false)}>卖出</li>
        </ul>
      </div>
    }>
      {
        books.map(book => {
          const { book: cart } = book
          if (!book.names) return (
            <SwipeAction
              key={book._id}
              rightActions={flag ? [
                {
                  key: 'editor',
                  text: '编辑',
                  color: 'success',
                  onClick: () => router.push(`/sell?bookid=${book._id}`)
                },
                {
                  key: 'delete',
                  text: '删除',
                  color: 'danger',
                  onClick: () => removeBook(book._id)
                },
              ] : undefined}
            >
              <List.Item
              
                arrow={false}
                onClick={() => router.push(`/goods/${book._id}`)}
                prefix={
                  <div className={styles.img}>
                    <Image alt='' src={book.banner[0]} fit='cover'
                      width={45} height={60} />
                  </div>
                }
                extra={<Space direction='vertical' align='end'>
                  {book.putaway && <Tag color='success'>上架</Tag>}
                  {(!book.putaway && book.judger) && <Tag color='#705697'>未通过审核</Tag>}
                  {(!book.putaway && !book.judger) && <Tag color='warning'>审核中</Tag>}
                  <>
                    价格: <span className='price'>{(book.lowprice).toFixed(2)}</span>
                  </>
                </Space>}
                description={
                  <Ellipsis direction='end' rows={2} content={'简介: ' + book.content} />
                }
              >
                <div className={styles.content}>
                  <div className={styles.title}>{book.title}</div>
                </div>
              </List.Item>
            </SwipeAction>
          )
          else return (
            <List.Item
              key={book._id}
              arrow={false}
              onClick={() => router.push(`/goods/${cart._id}`)}
              prefix={
                <div className={styles.img}>
                  <Image alt='' src={cart.banner[0]} fit='cover'
                    width={45} height={60} />
                </div>
              }
              extra={
                <Space direction='vertical' align='end'>
                  <>
                    价格: <span className='price'>{(book.allprice).toFixed(2)}</span>
                  </>
                </Space>
              }
              description={
                <Space wrap>
                  {
                    book.names.map((item, idx) =>
                      <Tag key={idx} color='default'>{item}</Tag>
                    )
                  }
                  {timeConvert(book.time) + ' 卖出'}
                </Space>}

            >
              <div className={styles.content}>
                <div className={styles.title}>{cart.title}</div>
              </div>
            </List.Item>
          )
        })
      }
      {books.length === 0 && <Empty />}
      {
        !judgeLoad(books, hasMore) &&
        <InfiniteScroll
          loadMore={async () => {
            if (books?.length)
              getBooks(books.length, active ? Relevance.Myissue : Relevance.Maichu)
          }}
          hasMore={hasMore}
          threshold={50}
        />
      }
    </List>
  )
}

export default Goods
